<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣App-书影音</title>
    <link rel="shortcut icon" href="https://img3.doubanio.com/favicon.ico">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./img/icon/font_iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/app-public.css">
    <link rel="stylesheet" href="./css/app-movie.css">
</head>
<body>
    <div class="mobile">
        <header>
            <div class="functional_domain flexBox">
                <span class="showMore iconfont">&#xe66d;</span>
                <div class="searchBar flexBox">
                    <span class="iconfont">&#xe8d6;</span>
                    <span class="placeholder">吵架没发挥好组</span>
                </div>
                <span class="showMessage iconfont">&#xe65e;</span>
            </div>
            <div class="module_switch">
                <a href="javascript:void(0);" class="statuses" data-index="1">动态</a>
                <a href="javascript:void(0);" class="recommends current" data-index="2">推荐</a>
                <span class="afterSlider"></span>
            </div>
        </header>
        
        <aside>
            <div class="main">
                <div class="hd flexBox">
                    <span class="iconfont close">&#xe600;</span>
                    <span class="iconfont">&#xe60e;</span>
                </div>
                <div class="mid">
                    <div class="user flexBox">
                        <div class="avatar"><img src="./img/avatar.jpg" alt=""></div>
                        <span class="username">未登录</span>
                    </div>
                    <div class="userFuncArea">
                        <div class="top">
                            <div class="item flexBox">
                                <span class="iconfont">&#xe70f;</span>
                                <span class="text">我的收藏/豆列</span>
                                <span class="rightText">我的豆列在这里</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xe609;</span>
                                <span class="text">我的关注</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xe638;</span>
                                <span class="text">我的浏览</span>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="item flexBox">
                                <span class="iconfont">&#xe621;</span>
                                <span class="text">青少年模式</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xe621;</span>
                                <span class="text">设置</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xe624;</span>
                                <span class="text">帮助与反馈</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xf706;</span>
                                <span class="text">社区管理中心</span>
                            </div>
                            <div class="item flexBox logOut">
                                <span class="iconfont">&#xe621;</span>
                                <span class="text">退出登录</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bd">
                    <div class="topFuncArea flexBox">
                        <div class="item flexBox">
                            <span class="iconfont order"></span>
                            <span class="text">订单</span>
                        </div>
                        <div class="item flexBox">
                            <span class="iconfont cart"></span>
                            <span class="text">购物车(2)</span>
                        </div>
                        <div class="item flexBox">
                            <span class="iconfont wallet"></span>
                            <span class="text">钱包</span>
                        </div>
                        <div class="item flexBox">
                            <span class="iconfont db_time"></span>
                            <span class="text">豆瓣时间</span>
                        </div>
                        <div class="item flexBox">
                            <span class="iconfont db_bookshelf"></span>
                            <span class="text">豆瓣阅读书架</span>
                        </div>
                    </div>
                    <div class="license">
                        <img src="./img/副页-license.png" alt="">
                        <span>证照信息<span class="iconfont">&#xe6a3;</span></span>
                    </div>
                </div>
            </div>
            <div class="mask"></div>
        </aside>

        <main>

        </main>
        
        <footer>
            <div class="container flexBox">
                <a href="./index.html" class="item flexBox" id="index" data-index="1">
                    <span class="iconfont" data-index="1"></span>
                    <span class="text" data-index="1">首页</span>
                </a>
                <a href="./app-movie.html" class="item flexBox" id="media" data-index="2">
                    <span class="iconfont" data-index="2"></span>
                    <span class="text" data-index="2">书影音</span>
                </a>
                <a href="javascript:void(0);" class="item flexBox current" id="group" data-index="3">
                    <span class="iconfont" data-index="3"></span>
                    <span class="text" data-index="3">小组</span>
                </a>
                <a href="./app-market.html" class="item flexBox" id="market" data-index="4">
                    <span class="iconfont" data-index="4"></span>
                    <span class="text" data-index="4">市集</span>
                </a>
                <a href="./app-user.html" class="item flexBox" id="user" data-index="5">
                    <span class="iconfont" data-index="5"></span>
                    <span class="text" data-index="5">我</span>
                </a>
            </div>
            
            <div class="publish_icon"></div>
        </footer>
    </div>
</body>
<script src="./lib/jquery-3.6.1.min.js"></script>
<script src="./lib/jquery.bcakgroundColor.js"></script> <!-- 背景颜色渐变插件 -->
<script src="./js/app-public.js"></script>
</html>